<template>
  <div id="pdf" class="pdf-container">
    <h2 class="activity-title">{{ activityTitle }}</h2>
    <table class="students-table">
      <colgroup>
        <col width="110">
        <col width="110">
        <col width="110">
        <col width="110">
      </colgroup>
      <thead>
      <tr>
        <th class="special-header">学号</th>
        <th class="special-header">姓名</th>
        <th class="special-header">班级</th>
        <th class="special-header">备注</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(student, index) in students" :key="index">
        <td>{{ student.accountNo }}</td>
        <td>{{ student.studentName }}</td>
        <td>{{ student.studentClass }}</td>
        <td>{{ }}</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "Activity",
  data() {
    return {
      activityTitle: '活动标题',
      students: []
    };
  },
  created() {
    window.parent.getTemplateData((data) => {
      this.students = data.data;
      this.activityTitle = data.message;
    })
  },
  methods: {}
};
</script>

<style scoped>
.pdf-container {
  width: 210mm; /* A4纸宽度 */
  height: 297mm; /* A4纸高度 */
  margin: 0 auto; /* 水平居中 */
  padding: 20px; /* 边距 */
  font-family: "宋体", SimSun;
}

.activity-title {
  text-align: center; /* 标题居中 */
  margin-bottom: 20px; /* 标题下方留白 */
}

.students-table {
  width: 100%;
  border-collapse: collapse;
}

.students-table th,
.students-table td {
  border: 1px solid #000; /* 边框 */
  padding: 10px 0; /* 单元格内边距 */
  font-family: "宋体", SimSun;
  text-align: center;
}

.special-header {
  border-top: 2px solid #000; /* 上边框加粗 */
  border-bottom: 2px solid #000; /* 下边框加粗 */
}
</style>
